<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>团队成员</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <style>
        .content {
            margin: 0;
            padding: 0;
        }

        .teamNum {
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 4.5rem;
            background: rgba(255, 255, 255, 1);
        }

        .showText {
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(102, 102, 102, 1);
            text-align: center;
        }

        .showNum {
            font-size: 1.25rem;
            font-family: MicrosoftYaHei;
            color: rgba(255, 147, 38, 1);
            text-align: center;
        }

        .myMember {
            display: -webkit-flex;
            display: flex;
            justify-content: space-around;
            height: 3rem;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0rem 0rem 0.5rem rgba(102, 102, 102, 0.2);
            text-align: center;
            line-height: 1.5rem;
            width: 100%;
        }

        .levalNav {
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
        }

        .levalNavText {
            text-align: center;
            font-size: 0.6rem;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
        }

        .levalNavNum {
            text-align: center;
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
        }

        .myMember .active {
            width: 33.33%;
            background: rgba(238, 238, 238, 1);
        }

        .myMember .active .levalNavText {
            text-align: center;
            font-size: 0.6rem;
            font-family: MicrosoftYaHei;
            color: rgba(255, 147, 38, 1);
        }

        .myMember .active .levalNavNum {
            text-align: center;
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(255, 147, 38, 1);
        }

        .myMember .first {
            width: 33.33%;
            border-right: 0.1rem solid rgba(238, 238, 238, 1);
        }

        .myMember .second {
            width: 33.33%;
            border-right: 0.1rem solid rgba(238, 238, 238, 1);
        }

        .myMember .third {
            width: 33.33%;

        }

        .firstDemberDetail {
            margin-top: 0.5rem;
        }

        .memberDetail {
            display: -webkit-flex;
            display: flex;
            height: 2.5rem;
            background: rgba(255, 255, 255, 1);
            border-top: 0.01rem solid rgba(238, 238, 238, 1);
        }

        .header {
            height: 2.5rem;
            width: 15%;
            text-align: center;
            line-height: 2.5rem;
        }

        .header .headerImg {
            width: 1.8rem;
            height: 1.8rem;
            margin-top: 0.3rem;
            border-radius: 0.9rem 0.9rem 0.9rem 0.9rem;
        }

        .nameAndreg {
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            width: 83%;
            height: 2.5rem;
            text-align: center;
        }

        .nameAndreg .name {
            line-height: 2.5rem;
            text-align: center;
            font-size: 0.75rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
        }

        .nameAndreg .reg {
            line-height: 2.5rem;
            text-align: center;
            font-size: 0.5rem;
            font-family: MicrosoftYaHei;
            color: rgba(148, 149, 149, 1);
        }
    </style>
</head>

<body>
<!-- 你的html代码 -->
<div class="page">
    <!--<header class="bar bar-nav">-->
    <!--<a class="button button-link button-nav pull-left" data-transition='slide-out'>-->
    <!--<span class="icon icon-left"></span>-->
    <!--返回-->
    <!--</a>-->
    <!--<h1 class="title">团队成员</h1>-->
    <!--</header>-->
    <nav class="bar bar-tab">
        <a class="tab-item" href="../index.html">
            <span class="icon icon-home"></span>
            <span class="tab-label">首页</span>
        </a>
        <a class="tab-item" href="../category.html">
            <span class="icon icon-menu"></span>
            <span class="tab-label">分类</span>
        </a>
        <a class="tab-item" href="../cart.html">
            <span class="icon icon-cart"></span>
            <span class="tab-label">购物车</span>
        </a>
        <a class="tab-item  active" href="../personal.html">
            <span class="icon icon-me"></span>
            <span class="tab-label">我的</span>
        </a>
    </nav>
    <!-- 这里是页面内容区 -->
    <div class="content">
        <div class="teamNum">
            <span class="showText">我的团队总数(人)</span>
            <span class="showNum">0</span>
        </div>
        <div class="myMember">
            <div class="first levalNav active" onclick="activeItem(this);">
                <span class="firstText levalNavText">一级成员(人)</span>
                <span class="firstNum levalNavNum">0</span>
            </div>
            <div class="second levalNav" onclick="activeItem(this);">
                <span class="secondText levalNavText">二级成员(人)</span>
                <span class="secondNum levalNavNum">0</span>
            </div>
            <div class="third levalNav" onclick="activeItem(this);">
                <span class="thirdText levalNavText">三级成员(人)</span>
                <span class="thirdNum levalNavNum">0</span>
            </div>
        </div>
        <div id="user-container">
            <!--<div class="memberDetail firstDemberDetail">-->
            <!--<div class="header">-->
            <!--<img class="headerImg"-->
            <!--src="http://img.zcool.cn/community/0142135541fe180000019ae9b8cf86.jpg@1280w_1l_2o_100sh.png">-->
            <!--</div>-->
            <!--<div class="nameAndreg">-->
            <!--<div class="name">菜单和</div>-->
            <!--<div class="reg">注册时间:2018-07-04 16:00:00</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="memberDetail">-->
            <!--<div class="header">-->
            <!--<img class="headerImg"-->
            <!--src="http://img.zcool.cn/community/0142135541fe180000019ae9b8cf86.jpg@1280w_1l_2o_100sh.png">-->
            <!--</div>-->
            <!--<div class="nameAndreg">-->
            <!--<div class="name">菜单和</div>-->
            <!--<div class="reg">注册时间:2018-07-04 16:00:00</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="memberDetail">-->
            <!--<div class="header">-->
            <!--<img class="headerImg"-->
            <!--src="http://img.zcool.cn/community/0142135541fe180000019ae9b8cf86.jpg@1280w_1l_2o_100sh.png">-->
            <!--</div>-->
            <!--<div class="nameAndreg">-->
            <!--<div class="name">菜单和</div>-->
            <!--<div class="reg">注册时间:2018-07-04 16:00:00</div>-->
            <!--</div>-->
            <!--</div>-->
        </div>
    </div>
</div>
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../js/index.js' charset='utf-8'></script>
</body>
<script>
    $(function () {
        getMyUserByLevel("1", "1");
        getAllUserNum("1");
    });

    /**
     * 切换选项
     */
    function activeItem(obj) {
        $(".levalNav").each(function () {
            $(this).removeClass("active");
        });
        var levelClass = $(obj).attr("class").split(" ")[0];
        $(obj).addClass("active");
        if (levelClass == "second") {
            getMyUserByLevel("1", 2);
        } else if (levelClass == "third") {
            getMyUserByLevel("1", 3);
        } else if (levelClass == "first") {
            getMyUserByLevel("1", "1");
        }
    }

    function getMyUserByLevel(userId, Level) {
        $.getJSON(prefix + "/userInfo/api/getMyMember/" + userId + "/" + Level, function (data) {
            var userList = data.data;
            var userListHtml = "";
            if (data.code == 0) {
                $.each(userList, function (index, item) {
                    if (index == 0) {
                        userListHtml += '<div class="memberDetail firstDemberDetail">' +
                            '<div class="header">' +
                            '<img class="headerImg" src="' + item.flAvatar + '">' +
                            '</div>' +
                            '<div class="nameAndreg">' +
                            '<div class="name">' + item.flName + '</div>' +
                            '<div class="reg">注册时间:' + item.flRegisteredTime + '</div>' +
                            '</div>' +
                            '</div>';
                    } else {
                        userListHtml += '<div class="memberDetail">' +
                            '<div class="header">' +
                            '<img class="headerImg" src="' + item.flAvatar + '">' +
                            '</div>' +
                            '<div class="nameAndreg">' +
                            '<div class="name">' + item.flName + '</div>' +
                            '<div class="reg">注册时间:' + item.flRegisteredTime + '</div>' +
                            '</div>' +
                            '</div>';
                    }
                });
                $("#user-container").html(userListHtml);
            }
        });
    }

    function getAllUserNum(userId) {
        $.getJSON(prefix + "/userInfo/api/getMyMember/" + userId + "/-1", function (data) {
            $(".teamNum .showNum").text(data.data.length);
        });
        $.getJSON(prefix + "/userInfo/api/getMyMember/" + userId + "/1", function (data) {
            $(".firstNum").text(data.data.length);
        });
        $.getJSON(prefix + "/userInfo/api/getMyMember/" + userId + "/2", function (data) {
            $(".secondNum").text(data.data.length);
        });
        $.getJSON(prefix + "/userInfo/api/getMyMember/" + userId + "/3", function (data) {
            $(".thirdNum").text(data.data.length);
        });
    }
</script>

</html>
